<template>
  <div>
    <el-dialog
      :close-on-click-modal="false"
      v-model="visibleDialog"
      :title="props.title"
      width="700px"
      draggable
      destroy-on-close
      @close="closeDialog"
    >
      <div
        v-loading="loading"
        class="el-transfer"
        element-loading-text="更新中"
      >
        <el-transfer
          :button-texts="['解除', '赋予']"
          :data="roleList"
          style="text-align: center; display: inline-block"
          :filterable="true"
          :props="{
            key: 'id',
            label: 'roleName',
          }"
          :titles="['可用角色', '已分配角色']"
          v-model="selectRoleList"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="posting" @click="handleSubmit"
            >确 定</el-button
          >
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";

defineOptions({
  name: "UpUserRole",
  inheritAttrs: false,
});

const emit = defineEmits(["reset-table", "change-visible"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

/** 弹窗显示隐藏 */
const visibleDialog = ref(false);
watch(
  () => props.visible,
  (newVal: boolean) => {
    visibleDialog.value = newVal;
    if (newVal) {
      roleList.value = props.data;
      getMeuList();
    }
  }
);

const roleList = ref();
const selectRoleList = ref([]);

const loading = ref(false);
async function getMeuList() {
  loading.value = true;
  const { data } = await request({
    url: "/system/refUserRole/getList",
    method: "post",
    data: {
      userId: props.id,
    },
  }).finally(() => {
    loading.value = false;
  });
  const roleIds = data?.map((p: any) => p.roleId);
  nextTick(() => {
    selectRoleList.value = roleIds;
  });
}

/** 编辑赋值 */
watch(
  () => props.id,
  (newVal: string) => {
    if (newVal) {
      // 接口获取最新值
      if (newVal?.length) {
        visibleDialog.value = true;
      }
    }
  }
);

/** 关闭表单弹窗 */
function closeDialog() {
  visibleDialog.value = false;
  emit("change-visible", false);
}

const posting = ref(false);

/** 保存提交 */
async function handleSubmit() {
  posting.value = true;
  await request({
    url: "/system/refUserRole/saveList",
    method: "post",
    data: {
      userId: props.id,
      roleIds: selectRoleList.value,
    },
  }).finally(() => {
    posting.value = false;
  });

  ElMessage.success(`权限分配成功`);
  closeDialog();
  emit("reset-table");
}
// 组件销毁时调用
onBeforeUnmount(() => {
  closeDialog();
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog .el-dialog__body) {
  display: flex;
  justify-content: center;
}
</style>
